doctype html
html
    head
        title #{title}
        link(rel="stylesheet", href="../public/css/normalize.css")
        link(rel="stylesheet", href="../public/css/element.css")
        link(rel="stylesheet", href="../public/css/crawler.css")
    body
        #container
            #header Koa-crawler
            #main
                el-steps(:active="active",align-center,finish-status="success",process-status="success")
                    el-step(title="开始")
                    el-step(title="爬取",description="从房天下上爬取张点区二手房交易数据。包括不限于房屋的描述，面积，位置，总价，均价，户型等信息。")
                    el-step(title="入库",description="将爬取的数据筛选并结构化到本地的mysql数据库中，以便与分析使用")
                    el-step(title="结束")
                div
                    el-button(type="primary",style="margin-top:50px",@click="next",:disabled="ableBtn") {{buttonName}}
        script(src="../public/js/jquery.min.js")
        script(src="../public/js/vue.js")
        script(src="../public/js/element.js")
        script.
            window.onload=function(){
                new Vue({
                    el:'#container',
                    data:{
                        active:0,
                        ableBtn:false
                    },
                    computed:{
                        buttonName(){
                            switch(this.active){
                                case 0:
                                    return '开始'
                                    break
                                case 3:
                                    return '完成'
                                    break
                                default:
                                    return '下一步'
                                    break
                            }
                        }
                    },
                    methods:{
                        next(){
                            const _this=this;
                            _this.active<3?this.active++:''
                            if(_this.active===1){
                                _this.ableBtn=true
                                const loading = _this.$loading({
                                    lock: true,
                                    text: '正在爬取和入库，请稍候...',
                                    spinner: 'el-icon-loading',
                                    background: 'rgba(255, 255, 255, 0.6)'
                                });
                                $.ajax({
                                    url:'/spider',
                                    success(result){
                                        console.log(result)
                                        if(result==='ok'){
                                            _this.ableBtn=false;
                                            _this.active=3;
                                            loading.close()
                                        }
                                    }
                                })
                            }
                        }
                    }
                })
            }